<template>
  <div :id="toolbarId" class="row items-center q-gutter-x-md q-py-md">
    <!-- <q-btn color="primary" label="刷新" @click="onRefresh" />

    <q-separator vertical />
    <search-select field="orderType" label="指令类型" :id="tableId" :rows="rows" :dark="dark" /> -->

    <!-- <filter-input :dark="dark" /> -->
    <!-- <q-btn color="primary" label="指令起吊" @click="handleClick('指令起吊')" />
    <q-btn color="primary" label="指令卸下" @click="handleClick('指令卸下')" /> -->
    <!-- <q-toggle label="全屏" v-model="fullscreen" />

    <q-toggle label="深色" :model-value="dark" @update:model-value="handleModeChange" /> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { useQueryClient } from 'vue-query';
import { AppFullscreen, useQuasar } from 'quasar';
// import FilterInput from 'src/components/filter/input.vue';
import SearchSelect from 'src/components/search/select.vue';
import { emitter } from 'src/emitter';

export default defineComponent({
  name: 'main-toolbar',

  components: {
    // FilterInput,
    // SearchSelect,
  },

  props: {
    rows: {
      type: Array,
    },
    tableId: {
      type: String,
      required: true,
    },
    toolbarId: {
      type: String,
      required: true,
    },
    dark: {
      type: Boolean,
      required: true,
    },
  },

  setup(props) {
    const $q = useQuasar();
    const queryClient = useQueryClient();

    const fullscreen = ref(false);
    watch(fullscreen, () => {
      fullscreen.value ? AppFullscreen.request() : AppFullscreen.exit();
    });

    const handleModeChange = () => {
      emitter.emit('inform', { name: 'terminal-crane-change-dark-mode', value: !props.dark });
    };

    const onRefresh = () => {
      queryClient.invalidateQueries([props.tableId]);
      $q.notify({ message: '车载终端刷新成功' });
    };

    const handleClick = (type: string) => {
      emitter.emit('inform', { name: 'terminal-crane-toolbar', value: type });
    };

    return { fullscreen, onRefresh, handleClick, handleModeChange };
  },
});
</script>
